<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<title>付款</title>
<link rel="stylesheet" type="text/css" href="__JS__/mobileSelect/css/mobileSelect.css">
<script src="__JS__/mobileSelect/js/mobileSelect.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/static/css/s.common.css">
<link type="text/css" rel="stylesheet" href="/static/css/s.agent.css">
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="/static/js/common.js?v=0.134"></script>
<style type="text/css">
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
*, :after, :before {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html{font-size:50px}
body{
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:32px;background-color:#f5f5f9
}
body{line-height:40px!important;font-size:26px!important}
body,body.g-init-echart{font-family:Microsoft YaHei,Helvetica!important;color:#2e3136;background:#f5f6f7!important}
button, input, optgroup, select, textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button, input {
    overflow: visible;
}
.v-goods-cart ._select {
    display: inline-block;
    width: 44px;
    height: 44px;
    border: 1px solid #9b9b9b;
    border-radius: 100%;
    text-align: center;
    line-height: 44px;
    color: #fff;
    margin: 0 30px 0 10px;
    background: #fff;
}
.v-goods-cart ._select._allSelected, .v-goods-cart ._select._selected, .v-goods-cart ._select._selected._cloud {
    background: #fa6f60;
    border-color: #fa6f60;
}
.c-share-back {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 200px;
    z-index: 9;
    padding-left: 50px;
}
.c-share-back .__content {
    float: left;
    width: 70px;
}
.c-share-back .__icon {
    float: right;
    border-radius: 100%;
    text-align: center;
    background: rgba(0,0,0,.5);
    line-height: 70px;
    height: 70px;
    width: 70px;
    margin-top: -70px;
    color: #fff;
    font-size: 50px;
}
.shop-list-goods-fix{
	/*position: absolute!important;right:0; */
	margin-right:40px;
	border: none;
    background: rgb(255, 255, 255);
}
.shop-list-goods-reduce{
	float:left;
	width: 48px!important;
    height: 48px!important;
    color: #9c9fa6;
    background: #fff;
    text-align: center;
    line-height: 48px;
    position: relative;
    margin-top: 6px;
	color: #5ba2e4;
}
.shop-list-goods-reduce:after {
    content: "\E685";
    font-size: 46px;
    font-family: iconfont;
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    color: #999;
}
.shop-list-goods-amount{
	float: left;
    width: 150px;
    color: #333;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    background-color: #fff;
    padding: 0 15px;
	border: 1px solid rgb(232, 232, 232);
    background: rgb(241, 241, 241);
	-webkit-appearance:none;
	outline:0;
}
.shop-list-goods-add{
	float:left;
	width: 48px!important;
    height: 48px!important;
    color: #9c9fa6;
    background: #fff;
    text-align: center;
    line-height: 48px;
    position: relative;
    margin-top: 6px;
	color: transparent!important;
	font-weight: 400;
    font-style: normal;
    display: inline-block;
}
.shop-list-goods-add:after {
    content: "\E71E";
    font-size: 46px;
    font-family: iconfont;
    position: absolute;
    color: #1b9af9;
    top: 0;
    left: 0;
}
.cart-remove-box{
	-webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2; 
	justify-content: flex-end;
    align-items: center;
    display: flex;
}
span.cart-remove{ width:80px;height:100%; background:#9C9FA6; color:#ffffff; justify-content:center; align-items:center; display:flex; }
.g-radiu{ border:1px solid #fa6f60; line-height:50px; padding:0 20px; border-radius:25px;color:#fa6f60; }

.address-select-box{ display:flex; height:150px; width:100%; background:url(__IMG__/address_bg.png) #FEFFFF repeat-x left top; }
.location{ width:60px; height:100%; display:flex;justify-content:center; align-items:center;  }
.address-info{ flex:1; display:flex; align-items:center; }
.address-info div{}
.address-info p{ padding:4px 0; line-height:1.4em; }
.address-select{ width:60px; height:100%; display:flex;justify-content:center; align-items:center;}

.layui-m-layer-msg .layui-m-layercont{ font-size:28px; line-height:44px; padding:20px 40px;}

.mobileSelect .content .btnBar {
    border-bottom: 2px solid #DCDCDC;
    font-size: 30px;
    height: 90px;
    line-height: 90px;
}
.mobileSelect .content .btnBar .cancel, .mobileSelect .content .btnBar .ensure {
    height: 90px;
    width: 110px;
}
.mobileSelect .content .panel .wheel {
    height: 400px;
}
.mobileSelect .content .panel .wheel .selectContainer li {
    font-size: 30px;
    height: 80px;
    line-height: 80px;
}
.mobileSelect .content .panel .wheels {
    width: 100%;
    height: 400px;
}
.mobileSelect .content .panel .selectLine {
    height: 80px;
    width: 100%;
    top: 160px;
    border-top: 2px solid #DCDCDC;
    border-bottom: 2px solid #DCDCDC;
}
.mobileSelect .content .panel .shadowMask{
	height:400px;
}
.mobileSelect .content .btnBar .title{ font-size:30px; }
</style>
</head>

<body>

<div id="pages">

	<div class="g-reset g-col g-warp-scroll common-bs-wrapper" style="overflow: hidden;">
		<div class="__scroller" style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
			
			<div class="g-reset g-flex g-fd-c g-m-b">
				<div>
					{volist name='data.products' id='v'}
					<div class="g-pd g-bb" style="background-color: rgb(249, 249, 249);">
						<div class="g-flex">
							<img src="{$v.productmainimg}" alt="" class="g-img-140">
							<div class="g-flex g-fd-c g-col g-pd-lr g-jc-sb">
								<div class="g-flex g-jc-sb">
									<div class="g-twoline g-col">{$v.productname}</div>
									<div>
										<p class="g-orange-dark undefined false">￥{$v.productprice}</p></div>
								</div>
								<div class="g-flex g-jc-sb">
									<span class="g-black-light"></span>
									<span class="g-black-middle g-pd-l">X{$v.buynum}</span>
								</div>
							</div>
						</div>
					</div>
					{/volist}
				</div>
			</div>
			
		</div>
	</div>

</div>


<div>
	<div class="g-reset" style='display:none0'>

		<div class="g-bg-white g-row g-row-payment">
			<p class="g-close-position g-bb" style="text-align:left;padding-left:35px;">{$data.steps.typename}</p>
			<p class="g-tc g-m-t-20 g-m-b-20 g-fs-32">需支付<span class="g-orange-dark">￥{$data.steps.amount}</span></p>
			<div class="g-h-600 g-pd-lr" style="height:auto!important;">
				<ul class="g-flex g-fd-c">
					{volist name='data.steps.paytype' id='v' key='k'}
					<li class="g-pd g-bb" pay-type="{$v.paytype}">
						<div class="g-flex g-bb g-pd-b" style="width:100%;border:0!important;">
							<i class="iconfont icon-qianbao g-blue-middle g-fs-40"></i>
							<div class="g-col g-pd-lr">
								<span class="g-fs-30">{$v.payname}{if condition="($v.paytype eq '2') or ($v.paytype eq '3')"}<span style='color:#ef3528!important;'>(可用余额：{$v.amount})</span>{/if}</span>
								<p class="g-black-middle">{$v.des}</p>
							</div>
							<!--<i class="iconfont icon-completed g-blue-middle g-fs-45"></i>-->
							<i class="iconfont icon-completed g-fs-45 g-black-light"></i>
						</div>
						<p class="g-orange-middle g-fs-24 g-pd-t-10" style='display:none;'>备注：你可以使用微信、支付宝、银行卡或是现金等方式将钱转给上级代理</p>
					</li>
					{/volist}
				</ul>
			</div>
			
			<!--<div class="g-lh-80 g-bg-blue g-tc g-up-pz" pay-type="">立即付款(上传凭证)</div>-->
			<div class="g-lh-80 g-bg-blue g-tc g-topay">立即付款</div>
			
		</div>
	</div>
</div>

<script>

var postData = {
	orderid : "{$data.orderid}",
	ordertype : "{$data.steps.type}",
	paytype : "",
	loginpwd : ""
};

function _alert(msg){
	layer.open({
		content: msg
		,skin: 'msg',time: 2
	});
}

$(function(){

	//关闭支付方式
	$('.icon-close').click(function(){
		$('.g-reset-fixed,.g-row-payment').css('display','none');
	});
	//选中某个支付方式
	$('i.icon-completed').click(function(){
		if($(this).parents('li').eq(0).hasClass('paytype-disabled')){
			_alert('该支付方式不可用');
			return;
		}
		$('i.icon-completed').removeClass('g-blue-middle');
		$(this).addClass('g-blue-middle');
	});
	//
	$('.g-topay').click(function(){
		//立即付款
		if($('.icon-completed.g-blue-middle').length != 1){
			_alert('请选择正确的支付方式');
			return;
		}
		let li = $('.icon-completed.g-blue-middle').parents('li').eq(0);
		payType = parseInt($(li).attr('pay-type'));
		postData.paytype = payType;
		if(payType == 2 || payType == 3){
			lpassword('请输入登陆密码','身份验证',function(content){
				if(content == ''){
					_alert('请输入登陆密码');
					return;
				}
				postData.loginpwd = content;
				$.ajax({
					url : "{:url('Order/blancepay')}",
					type : "POST",
					dataType : "JSON",
					data : postData,
					success : function(e){
						if(e.flag){
							location.reload();
						}else{
							_alert(e.info);
						}
					},error : function(){
						_alert('网络异常， 请重试');
					},complete : function(){
					}
				});
			},function(){});
		
		}else if(payType == 1){
			if(postData.ordertype == 'orderamount'){
				CheckHuoKuanPayAmout({$data.steps.amount},function(){
					buildForm("{:url('Order/xxpay')}","GET",postData);
				});
			}else{
				buildForm("{:url('Order/xxpay')}","GET",postData);
			}
		}else if(payType == 4){
			//微信支付
			CheckWePayAmout({$data.steps.amount},function(){
				buildForm("{:url('Order/wepay')}","GET",postData);
			});
		}
	});
});

var canPost = true;
function buildForm(url,method,data){
	if(!canPost) return false; canPost = false;
	let r = Math.floor(Math.random() * 10000);
	let html = "<div id='"+r+"' style='display:none;'><form action='"+url+"' method='"+method+"'>";
	for(let k in data){
		html += "<input type='hidden' name='"+k+"' value='"+data[k]+"'>";
	}
	html += "</form></div>";
	$('body').append(html);
	$('form','#'+r).submit();
}

//confirm框
function lconfirm(info,title,yes,no){
	if($('.lconfirm').length > 0){ return; }
	let html = '<div class="lconfirm"><div class="common-modal" style="position:fixed;"><div class="__bg __bg_enter"></div><div class="__fixed __enter" style="margin-top: 304.5px;"><p class="__close __bb"><div class="__title">TITLE</div></p><div class="__message">INFO</div><div class="__flex __jc-c __jd-c false false"></div><div class="__flex __pd __jc-c"><div class="__col __flex __jc-c"><div class="__btn __confirm_no">取消</div></div><div class="__col __flex __jc-c"><div class="__btn __orange __confirm_yes">确定</div></div></div></div></div></div>';
	
	html = html.replace(/TITLE/g,title).replace(/INFO/g,info);
	$('body').append(html);
	$('.__confirm_no').click(function(){
		$('.lconfirm').remove();
		if(typeof no == 'function'){
			no();
		}
	});
	$('.__confirm_yes').click(function(){
		$('.lconfirm').remove();
		if(typeof yes == 'function'){
			yes();
		}
	});
}


//输入密码框
function lpassword(info,title,yes,no){
	if($('.lpassword').length > 0){ return; }
	let html = '<div class="lpassword"><div class="common-modal" style="position:fixed;"><div class="__bg __bg_enter"></div><div class="__fixed __enter" style="margin-top: 304.5px;"><p class="__close __bb"><div class="__title">TITLE</div></p><div class="__message"><input type="password" class="lpassword-content" placeholder="INFO"></div><div class="__flex __jc-c __jd-c false false"></div><div class="__flex __pd __jc-c"><div class="__col __flex __jc-c"><div class="__btn __confirm_no">取消</div></div><div class="__col __flex __jc-c"><div class="__btn __orange __confirm_yes">确定</div></div></div></div></div></div>';
	
	html = html.replace(/TITLE/g,title).replace(/INFO/g,info);
	$('body').append(html);
	$('.__confirm_no').click(function(){
		$('.lpassword').remove();
		if(typeof no == 'function'){
			no();
		}
	});
	$('.__confirm_yes').click(function(){
		let content = $('.lpassword').find('.lpassword-content').val();
		$('.lpassword').remove();
		if(typeof yes == 'function'){
			yes(content);
		}
	});
}
</script>





				
				

</body>
</html>